<%--
  Created by IntelliJ IDEA.
  User: tugou
  Date: 2017/5/3
  Time: 15:57
  To change this template use File | Settings | File Templates.
--%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sf" uri="http://www.springframework.org/tags/form" %>

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ page pageEncoding="UTF-8" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
          name="viewport" id="viewport">
    <title>新增</title>
    <script src="<%=basePath%>js/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>css/main.css">
    <!--导航-->
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script type="text/javascript"
            src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值&plugin=AMap.Autocomplete"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    <style>
        .show_div h5 {
            position: absolute;
            left: 0;
            bottom: 40px;
            width: 290px;
            background-color: rgba(0, 0, 0, 0.4);
            color: #fff;
            font-size: 14px;
            text-align: left;
            overflow: hidden;
            padding-left: 10px;
            height: 34px;
            line-height: 34px;
        }

        .text-img-top {
            background: #2f85ff;
            padding: 5px;
            font-size: 14px;
            width: auto;
            color: white;
            text-align: center;
        }

        .show_div a {
            width: 150px;
            background-color: #2f85ff;
            color: #fff;
            font-size: 14px;
            text-align: center;
            height: 40px;
            line-height: 40px;
        }
    </style>
    <script>
        marker = new AMap.Marker({
            icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
        });
        /**
         * 添加一个marker 上一个marker会被移除
         * @param lng
         * @param lat
         */
        function addMarker(lng, lat) {
            //删除上一个marker
            // marker.setPosition([lng, lat]);
            marker.setPosition([lng, lat]); //更新点标记位置
            marker.setMap(map);
        }
        /**
         * 移动位置
         * @param lng
         * @param lat
         */
        function mapMoveTo(lng, lat) {
            //添加marker
            addMarker(lng, lat);
            //移动到指定位置,设置缩放级别和中心点
            map.setZoomAndCenter(16, [lng, lat]);
            /* map.setzoom(13);
             map.panTo([lng, lat]);*/
        }
        function onSelectPic(input) {
            var obj_id = input.id;
            var last_char = obj_id.charAt(obj_id.length - 1);
            if (window.FileReader) {
                var file = input.files[0];
                filename = file.name.split(".")[0];
                var reader = new FileReader();
                reader.onload = function (e) {
                    var first_index = obj_id.indexOf("", 0);
                    var second_index = obj_id.indexOf("", first_index + 1);
                    var pre_str = obj_id.substr(0, second_index);
                    document.getElementById("choseImg").src = e.target.result;
                    /* 显示图片缩略图 */
                }
                reader.readAsDataURL(file);
            } else {
                alert('你的浏览器不支持图片预览功能');
            }
        }
        function inputEara(input) {
            var str = $("#inputEarm").val();
            /*  document.getElementById("earaName").text(str);*/
            $("#earaName").text(str);
        }
        function inputLocationName() {
            var str = $("#location").val();
            $("#locationName").text("地址:" + str);
        }
    </script>
</head>
<header>
    <a href="./index.html"><h1>报名学车管理后台</h1></a>
</header>
<div id="user_nav">
    <a href="<%=basePath%>sys/changePaw"><h1>${sysuser.userName}</h1></a>
    <h2>
        <c:if test="${sysuser.userType == 1}">
            系统管理员
        </c:if>
        <c:if test="${sysuser.userType == 2}">
            运营人员
        </c:if>
    </h2>
    <a href="<%=basePath%>admin/loginOut"><h3>退出</h3></a>
</div>
<div id="sidebar">
    <ul>
        <li><a href="<%=basePath%>sys/index/1"><i class="icon icon_home"></i><span>首页</span></a></li>
        <li><a href="<%=basePath%>sys/userList"><i class="icon icon_users"></i><span>人员管理</span></a></li>
        <li><a href="<%=basePath%>sys/getStudentList"><i class="icon icon_chapter"></i><span>学员信息管理</span></a></li>
        <li class="active"><a href="<%=basePath%>sys/examsPage"><i class="icon icon_exams"></i><span>学车点管理</span></a>
        </li>
            <li><a href="<%=basePath%>sys/settingPage"><i class="icon icon_setting"></i><span>网站设置</span></a></li>
    </ul>
</div>
<div id="content">
    <div class="title_h1">
        <h1>添加地点</h1>
        <h2>ADD ADDRESS</h2>
    </div>
    <div class="box_silde">
        <menu id="myTab1">
            <li class="active" onMouseOver="nTabs(this,0)" ;><em class="icon_exams_add"></em>添加地点</li>
        </menu>
        <form action="<%=basePath%>sys/commitExams" method="post" enctype="multipart/form-data">
            <input type="hidden" value="${loc.id}" name="id">
            <div class="TabContent">
                <div id="myTab1_Content0">
                    <ul>
                        <li>
                            <label class="box_silde_label">所在区域：</label>
                            <input class="box_silde_controls" type="text" name="areaname" value="${loc.areaname}"
                                   placeholder="例如:美兰区" onchange="inputEara(this)" id="inputEarm" style="width: 20%"/>
                            <label class="box_silde_label">学车地址：</label>
                            <input class="box_silde_controls" type="text" name="locationname"
                                   value="${loc.locationname}" placeholder="例如:海口美兰区国兴大道" onchange="inputLocationName()"
                                   id="location" style="width: 20%"/>

                        </li>
                        <li>
                            <label class="box_silde_label">联系电话：</label>
                            <input class="box_silde_controls" type="text" name="dsphone" value="${loc.dsphone}"
                                   placeholder="请输入联系电话"  id="inputphone" style="width: 20%"/>
                        </li>
                        <li>
                            <label class="box_silde_label">驾校背景图片：</label>
                            <input type="file" id="take-picture" accept="image" name="file"
                                   onchange="onSelectPic(this)">
                        </li>
                        <%--   <li>
                               <label class="box_silde_label">地点纬度：</label>
                               <input class="box_silde_controls" type="text" id="maplat" name="locationX" value="${loc.locationX}"/>
                           </li>--%>
                        <li>
                            <label class="box_silde_label" style="color: red;width:auto;margin-left: 20px">请在地图选择学车地址的坐标：否则无法导航</label>
                            <label class="box_silde_label" style="display: none">地点经度：</label>
                            <input class="box_silde_controls" type="text" id="maplng" name="locationY"
                                   value="${loc.locationY}"
                                   style="border: none;background: none;width: 100px;display: none"/>
                            <label class="box_silde_label" style="display: none">地点纬度：</label>
                            <input class="box_silde_controls" type="text" id="maplat" name="locationX"
                                   value="${loc.locationX}"
                                   style="border: none;background: none ;width: 100px;display: none"/>
                            <div id="gdMap"
                                 style="height: 350px;width: 90%;background: #139ff7 ;margin-left: 50px;"></div>
                            <div id="myPageTop" style="margin-top: 20px">
                                <div class="show_div" style="padding: 10px;width: 300px;height: auto">
                                    <div style="position: relative">
                                        <c:if test="${loc.bgPicture==null}">
                                            <img src="<%=basePath%>images/choseImg.png" id="choseImg" alt="这里是商品标题1"
                                                 class="img-responsive" style="width:300px;height: 200px">
                                        </c:if>
                                        <c:if test="${loc.bgPicture!=null}">
                                            <img src="<%=basePath%>${loc.bgPicture}" id="choseImg"
                                                 class="img-responsive" style="width:300px;height: 200px">
                                        </c:if>

                                        <span class="text-img-top" style="position:absolute; left:0; top:0;"
                                              id="earaName"><c:if test="${loc.areaname==null}">学车区域</c:if>
                                        <c:if test="${loc.areaname!=null}">${loc.areaname}</c:if></span>
                                        <h5 id="locationName"><c:if test="${loc.locationname==null}">学车地址</c:if>
                                            <c:if test="${loc.locationname!=null}">${loc.locationname}</c:if></h5>
                                        <div class="div_button" style="position:absolute; bottom: 0">
                                            <a type="button" style="float: left">预约学车</a>
                                            <a type="button" style="float: right">导航</a>
                                            <!-- <button type="button" class="btn btn-default">Right</button>-->
                                        </div>
                                        <!--  <p class="yul"><a href="javascript:void(0);" class="yeyue"><img src="images/icon_yuy.png">预约到此学车</a> <a
                                                  href="#" onclick="submit()"><img src="images/icon_map.png">导航</a></p>-->
                                    </div>
                                </div>
                            </div>
                            <script type="text/javascript">
                                var map = new AMap.Map("gdMap", {
                                    resizeEnable: true,
                                    zoom: 12
                                });
                                //为地图注册click事件获取鼠标点击出的经纬度坐标
                                var clickEventListener = map.on('click', function (e) {
                                    var lng = e.lnglat.getLng();
                                    var lat = e.lnglat.getLat();
                                    document.getElementById("maplng").value = lng;
                                    document.getElementById("maplat").value = lat;
                                    addMarker(lng, lat);
                                });
                                var auto = new AMap.Autocomplete({
                                    input: "tipinput"
                                });
                                AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
                                function select(e) {
                                    if (e.poi && e.poi.location) {
                                        map.setZoom(15);
                                        map.setCenter(e.poi.location);
                                    }
                                }
                            </script>
                        </li>
                    </ul>
                    <button type="submit" class="btn_save">提交</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<c:if test="${loc.locationY != null}">
    <script>
        mapMoveTo(${loc.locationY}, ${loc.locationX});
    </script>
</c:if>
</html>
